<template>
  <div class="monitor-data-container">
    <div class="search-bar">
      <el-input
          v-model="searchQuery"
          placeholder="搜索监控编号或位置"
          clearable
          @clear="handleSearchClear"
          @keyup.enter="handleSearch"
          style="width: 300px; margin-right: 10px;"
      />
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </div>

    <el-table :data="filteredData" border style="width: 100%" v-loading="loading">
      <el-table-column prop="monitorId" label="监控编号" width="120" />
      <el-table-column prop="location" label="位置" width="180" />
      <el-table-column prop="totalData" label="收集数据总数" width="150" />
      <el-table-column prop="collectorCount" label="采集人员数量" width="150" />
      <el-table-column prop="dominantEmotion" label="情绪最多状态" width="150">
        <template #default="{ row }">
          <el-tag :type="getEmotionTagType(row.dominantEmotion)">
            {{ row.dominantEmotion }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button size="small" type="primary" @click="handleEnter(row)">进入</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalItems"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 模拟数据
const mockData = Array.from({ length: 45 }, (_, i) => ({
  monitorId: `CAM-${1000 + i}`,
  location: ['大厅入口', '走廊东侧', '电梯间', '停车场A区', '办公室'][i % 5],
  totalData: Math.floor(Math.random() * 1000),
  collectorCount: Math.floor(Math.random() * 10) + 1,
  dominantEmotion: ['平静', '高兴', '愤怒', '悲伤', '惊讶', '恐惧'][i % 6]
}))

// 状态管理
const loading = ref(false)
const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const tableData = ref([])

// 计算属性
const totalItems = computed(() => tableData.value.length)
const filteredData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value

  let data = tableData.value
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    data = data.filter(item =>
        item.monitorId.toLowerCase().includes(query) ||
        item.location.toLowerCase().includes(query)
    )
  }

  return data.slice(start, end)
})

// 方法
const getEmotionTagType = (emotion) => {
  const map = {
    '平静': 'info',
    '高兴': 'success',
    '愤怒': 'danger',
    '悲伤': 'warning',
    '惊讶': '',
    '恐惧': 'danger'
  }
  return map[emotion] || ''
}

const handleEdit = (row) => {
  ElMessage.info(`编辑监控点: ${row.monitorId}`)
  // 这里可以跳转到编辑页面或打开编辑对话框
}

const handleEnter = (row) => {
  ElMessage.success(`进入监控点: ${row.monitorId} 的详情`)
  // 这里可以跳转到详情页面
}

const handleSearch = () => {
  currentPage.value = 1
}

const handleSearchClear = () => {
  currentPage.value = 1
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

// 初始化数据
const fetchData = () => {
  loading.value = true
  // 模拟API请求
  setTimeout(() => {
    tableData.value = mockData
    loading.value = false
  }, 500)
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.monitor-data-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-bar {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>